<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML5 新标签概述 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="HTML5 引入了许多新的标签，极大地增强了网页的结构...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">HTML5 新标签概述</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">HTML5 新标签概述</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>七月 12, 2024</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>6901</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
        
        <h2 id="HTML5-新标签概述"><a href="#HTML5-新标签概述" class="headerlink" title="HTML5 新标签概述"></a>HTML5 新标签概述</h2><p>HTML5 引入了许多新的标签，极大地增强了网页的结构化、语义化和多媒体处理能力。以下是这些新标签的分类和详细介绍。</p>
<h3 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h3><ol>
<li><a href="#%E7%BB%93%E6%9E%84%E6%80%A7%E6%A0%87%E7%AD%BE">结构性标签</a><ul>
<li><code>&lt;header&gt;</code></li>
<li><code>&lt;nav&gt;</code></li>
<li><code>&lt;section&gt;</code></li>
<li><code>&lt;article&gt;</code></li>
<li><code>&lt;aside&gt;</code></li>
<li><code>&lt;footer&gt;</code></li>
<li><code>&lt;main&gt;</code></li>
<li><code>&lt;figure&gt;</code></li>
<li><code>&lt;figcaption&gt;</code></li>
</ul>
</li>
<li><a href="#%E5%A4%9A%E5%AA%92%E4%BD%93%E6%A0%87%E7%AD%BE">多媒体标签</a><ul>
<li><code>&lt;audio&gt;</code></li>
<li><code>&lt;video&gt;</code></li>
<li><code>&lt;source&gt;</code></li>
<li><code>&lt;track&gt;</code></li>
<li><code>&lt;embed&gt;</code></li>
<li><code>&lt;canvas&gt;</code></li>
</ul>
</li>
<li><a href="#%E8%A1%A8%E5%8D%95%E5%A2%9E%E5%BC%BA%E6%A0%87%E7%AD%BE">表单增强标签</a><ul>
<li><code>&lt;datalist&gt;</code></li>
<li><code>&lt;keygen&gt;</code></li>
<li><code>&lt;output&gt;</code></li>
<li>新的输入类型</li>
</ul>
</li>
<li><a href="#%E5%85%B6%E4%BB%96%E5%8A%9F%E8%83%BD%E6%80%A7%E6%A0%87%E7%AD%BE">其他功能性标签</a><ul>
<li><code>&lt;progress&gt;</code></li>
<li><code>&lt;meter&gt;</code></li>
<li><code>&lt;details&gt;</code> 和 <code>&lt;summary&gt;</code></li>
<li><code>&lt;mark&gt;</code></li>
<li><code>&lt;time&gt;</code></li>
<li><code>&lt;ruby&gt;</code>、<code>&lt;rt&gt;</code>、<code>&lt;rp&gt;</code></li>
</ul>
</li>
</ol>
<h2 id="1-结构性标签"><a href="#1-结构性标签" class="headerlink" title="1. 结构性标签"></a>1. 结构性标签</h2><p>这些标签用于更语义化地定义页面结构，使网页内容更加易读和易维护。</p>
<ul>
<li><code>&lt;header&gt;</code></li>
<li><code>&lt;nav&gt;</code></li>
<li><code>&lt;section&gt;</code></li>
<li><code>&lt;article&gt;</code></li>
<li><code>&lt;aside&gt;</code></li>
<li><code>&lt;footer&gt;</code></li>
<li><code>&lt;main&gt;</code></li>
<li><code>&lt;figure&gt;</code></li>
<li><code>&lt;figcaption&gt;</code></li>
</ul>
<h3 id="1-1-lt-header-gt"><a href="#1-1-lt-header-gt" class="headerlink" title="1.1 &lt;header&gt;"></a>1.1 <code>&lt;header&gt;</code></h3><p><code>&lt;header&gt;</code> 标签定义文档或节的头部，通常包含导航链接、标题、logo 等内容。可以在页面的顶部，也可以在每个章节或文章的开头使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>网站标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#home&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#about&quot;</span>&gt;</span>关于我们<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#contact&quot;</span>&gt;</span>联系我们<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-2-lt-nav-gt"><a href="#1-2-lt-nav-gt" class="headerlink" title="1.2 &lt;nav&gt;"></a>1.2 <code>&lt;nav&gt;</code></h3><p><code>&lt;nav&gt;</code> 标签定义导航链接的容器，适用于主要导航链接。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#home&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#about&quot;</span>&gt;</span>关于我们<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#contact&quot;</span>&gt;</span>联系我们<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-3-lt-section-gt"><a href="#1-3-lt-section-gt" class="headerlink" title="1.3 &lt;section&gt;"></a>1.3 <code>&lt;section&gt;</code></h3><p><code>&lt;section&gt;</code> 标签定义文档中的节，可以包含标题、段落等内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>关于我们<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>我们是一家专注于提供优质服务的公司。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-4-lt-article-gt"><a href="#1-4-lt-article-gt" class="headerlink" title="1.4 &lt;article&gt;"></a>1.4 <code>&lt;article&gt;</code></h3><p><code>&lt;article&gt;</code> 标签定义独立的内容单元，例如文章、博客条目等。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>最新文章<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是最新的博客文章内容。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-5-lt-aside-gt"><a href="#1-5-lt-aside-gt" class="headerlink" title="1.5 &lt;aside&gt;"></a>1.5 <code>&lt;aside&gt;</code></h3><p><code>&lt;aside&gt;</code> 标签定义与主要内容相关的侧边栏内容，例如广告、推荐链接等。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>侧边栏标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是一些侧边栏内容。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-6-lt-footer-gt"><a href="#1-6-lt-footer-gt" class="headerlink" title="1.6 &lt;footer&gt;"></a>1.6 <code>&lt;footer&gt;</code></h3><p><code>&lt;footer&gt;</code> 标签定义文档或节的页脚，通常包含版权信息、联系信息等。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="symbol">&amp;copy;</span> 2024 公司名称. 保留所有权利。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-7-lt-main-gt"><a href="#1-7-lt-main-gt" class="headerlink" title="1.7 &lt;main&gt;"></a>1.7 <code>&lt;main&gt;</code></h3><p><code>&lt;main&gt;</code> 标签定义文档的主要内容，一个文档中应包含且仅包含一个 <code>&lt;main&gt;</code> 元素。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>主要内容标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是主要内容。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-8-lt-figure-gt-和-lt-figcaption-gt"><a href="#1-8-lt-figure-gt-和-lt-figcaption-gt" class="headerlink" title="1.8 &lt;figure&gt; 和 &lt;figcaption&gt;"></a>1.8 <code>&lt;figure&gt;</code> 和 <code>&lt;figcaption&gt;</code></h3><p><code>&lt;figure&gt;</code> 标签用于包含图像或图表等媒体内容，<code>&lt;figcaption&gt;</code> 用于提供图像的标题或描述。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">figure</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;image.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;描述图片&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">figcaption</span>&gt;</span>图片描述<span class="tag">&lt;/<span class="name">figcaption</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">figure</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-多媒体标签"><a href="#2-多媒体标签" class="headerlink" title="2. 多媒体标签"></a>2. 多媒体标签</h2><p>HTML5 增强了对音频和视频内容的支持，使多媒体内容的嵌入更加简单和标准化。</p>
<ul>
<li><code>&lt;audio&gt;</code></li>
<li><code>&lt;video&gt;</code></li>
<li><code>&lt;source&gt;</code></li>
<li><code>&lt;track&gt;</code></li>
<li><code>&lt;embed&gt;</code></li>
<li><code>&lt;canvas&gt;</code></li>
</ul>
<h3 id="2-1-lt-audio-gt"><a href="#2-1-lt-audio-gt" class="headerlink" title="2.1 &lt;audio&gt;"></a>2.1 <code>&lt;audio&gt;</code></h3><p><code>&lt;audio&gt;</code> 标签用于定义音频内容，可以嵌入音频文件，并支持多种格式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;audio.mp3&quot;</span> <span class="attr">type</span>=<span class="string">&quot;audio/mpeg&quot;</span>&gt;</span></span><br><span class="line">  您的浏览器不支持音频元素。</span><br><span class="line"><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-2-lt-video-gt"><a href="#2-2-lt-video-gt" class="headerlink" title="2.2 &lt;video&gt;"></a>2.2 <code>&lt;video&gt;</code></h3><p><code>&lt;video&gt;</code> 标签用于定义视频内容，支持多种格式和字幕。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span></span><br><span class="line">  您的浏览器不支持视频元素。</span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-3-lt-source-gt"><a href="#2-3-lt-source-gt" class="headerlink" title="2.3 &lt;source&gt;"></a>2.3 <code>&lt;source&gt;</code></h3><p><code>&lt;source&gt;</code> 标签为 <code>&lt;audio&gt;</code> 和 <code>&lt;video&gt;</code> 元素指定多个媒体资源，浏览器会选择第一个支持的资源。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.ogg&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/ogg&quot;</span>&gt;</span></span><br><span class="line">  您的浏览器不支持视频元素。</span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-4-lt-track-gt"><a href="#2-4-lt-track-gt" class="headerlink" title="2.4 &lt;track&gt;"></a>2.4 <code>&lt;track&gt;</code></h3><p><code>&lt;track&gt;</code> 标签为 <code>&lt;video&gt;</code> 和 <code>&lt;audio&gt;</code> 元素提供字幕或文本轨道。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">track</span> <span class="attr">src</span>=<span class="string">&quot;subtitles_en.vtt&quot;</span> <span class="attr">kind</span>=<span class="string">&quot;subtitles&quot;</span> <span class="attr">srclang</span>=<span class="string">&quot;en&quot;</span> <span class="attr">label</span>=<span class="string">&quot;English&quot;</span>&gt;</span></span><br><span class="line">  您的浏览器不支持视频元素。</span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-5-lt-embed-gt"><a href="#2-5-lt-embed-gt" class="headerlink" title="2.5 &lt;embed&gt;"></a>2.5 <code>&lt;embed&gt;</code></h3><p><code>&lt;embed&gt;</code> 标签用于嵌入外部内容，例如插件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">&quot;example.pdf&quot;</span> <span class="attr">type</span>=<span class="string">&quot;application/pdf&quot;</span> <span class="attr">width</span>=<span class="string">&quot;600&quot;</span> <span class="attr">height</span>=<span class="string">&quot;400&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-6-lt-canvas-gt"><a href="#2-6-lt-canvas-gt" class="headerlink" title="2.6 &lt;canvas&gt;"></a>2.6 <code>&lt;canvas&gt;</code></h3><p><code>&lt;canvas&gt;</code> 标签用于通过脚本（如 JavaScript）绘制图形。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">&quot;myCanvas&quot;</span> <span class="attr">width</span>=<span class="string">&quot;200&quot;</span> <span class="attr">height</span>=<span class="string">&quot;100&quot;</span> <span class="attr">style</span>=<span class="string">&quot;border:1px solid #000000;&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> canvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myCanvas&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">&#x27;2d&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  ctx.<span class="property">fillStyle</span> = <span class="string">&#x27;#FF0000&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">  ctx.<span class="title function_">fillRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">150</span>, <span class="number">75</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="3-表单增强标签"><a href="#3-表单增强标签" class="headerlink" title="3. 表单增强标签"></a>3. 表单增强标签</h2><p>HTML5 增强了表单的功能，增加了新的输入类型和表单控件。</p>
<ul>
<li><code>&lt;datalist&gt;</code></li>
<li><code>&lt;keygen&gt;</code></li>
<li><code>&lt;output&gt;</code></li>
<li>新的输入类型</li>
</ul>
<h3 id="3-1-lt-datalist-gt"><a href="#3-1-lt-datalist-gt" class="headerlink" title="3.1 &lt;datalist&gt;"></a>3.1 <code>&lt;datalist&gt;</code></h3><p><code>&lt;datalist&gt;</code> 标签提供输入建议的下拉列表。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">list</span>=<span class="string">&quot;browsers&quot;</span> <span class="attr">name</span>=<span class="string">&quot;browser&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;browsers&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Chrome&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Firefox&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Safari&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Opera&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Edge&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-2-lt-keygen-gt"><a href="#3-2-lt-keygen-gt" class="headerlink" title="3.2 &lt;keygen&gt;"></a>3.2 <code>&lt;keygen&gt;</code></h3><p><code>&lt;keygen&gt;</code> 标签用于生成公钥的密钥对（不再推荐使用）。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">keygen</span> <span class="attr">name</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-3-lt-output-gt"><a href="#3-3-lt-output-gt" class="headerlink" title="3.3 &lt;output&gt;"></a>3.3 <code>&lt;output&gt;</code></h3><p><code>&lt;output&gt;</code> 标签表示计算或用户操作的结果。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">oninput</span>=<span class="string">&quot;result.value=parseInt(a.value)+parseInt(b.value)&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;range&quot;</span> <span class="attr">id</span>=<span class="string">&quot;a&quot;</span> <span class="attr">value</span>=<span class="string">&quot;50&quot;</span>&gt;</span> +</span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> <span class="attr">id</span>=<span class="string">&quot;b&quot;</span> <span class="attr">value</span>=<span class="string">&quot;50&quot;</span>&gt;</span></span><br><span class="line">  = <span class="tag">&lt;<span class="name">output</span> <span class="attr">name</span>=<span class="string">&quot;result&quot;</span> <span class="attr">for</span>=<span class="string">&quot;a b&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">output</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-4-新的输入类型"><a href="#3-4-新的输入类型" class="headerlink" title="3.4 新的输入类型"></a>3.4 新的输入类型</h3><p>HTML5 引入了多种新的输入类型：</p>
<ul>
<li><code>email</code></li>
<li><code>url</code></li>
<li><code>number</code></li>
<li><code>range</code></li>
<li><code>date</code></li>
<li><code>time</code></li>
<li><code>datetime-local</code></li>
<li><code>month</code></li>
<li><code>week</code></li>
<li><code>search</code></li>
<li><code>color</code></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;email&quot;</span>&gt;</span>电子邮件：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> <span class="attr">id</span>=<span class="string">&quot;email&quot;</span> <span class="attr">name</span>=<span class="string">&quot;email&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;bday&quot;</span>&gt;</span>生日：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> <span class="attr">id</span>=<span class="string">&quot;bday&quot;</span> <span class="attr">name</span>=<span class="string">&quot;bday&quot;</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;favcolor&quot;</span>&gt;</span>选择你喜欢的颜色：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;color&quot;</span> <span class="attr">id</span>=<span class="string">&quot;favcolor&quot;</span> <span class="attr">name</span>=<span class="string">&quot;favcolor&quot;</span> <span class="attr">value</span>=<span class="string">&quot;#ff0000&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="4-其他功能性标签"><a href="#4-其他功能性标签" class="headerlink" title="4. 其他功能性标签"></a>4. 其他功能性标签</h2><p>HTML5 还引入了一些其他功能性标签，用于表示特定的语义或功能。</p>
<ul>
<li><code>&lt;progress&gt;</code></li>
<li><code>&lt;meter&gt;</code></li>
<li><code>&lt;details&gt;</code> 和 <code>&lt;summary&gt;</code></li>
<li><code>&lt;mark&gt;</code></li>
<li><code>&lt;time&gt;</code></li>
<li><code>&lt;ruby&gt;</code>、<code>&lt;rt&gt;</code>、<code>&lt;rp&gt;</code></li>
</ul>
<h3 id="4-1-lt-progress-gt"><a href="#4-1-lt-progress-gt" class="headerlink" title="4.1 &lt;progress&gt;"></a>4.1 <code>&lt;progress&gt;</code></h3><p><code>&lt;progress&gt;</code> 标签表示任务的完成进度。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">progress</span> <span class="attr">value</span>=<span class="string">&quot;70&quot;</span> <span class="attr">max</span>=<span class="string">&quot;100&quot;</span>&gt;</span>70%<span class="tag">&lt;/<span class="name">progress</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-2-lt-meter-gt"><a href="#4-2-lt-meter-gt" class="headerlink" title="4.2 &lt;meter&gt;"></a>4.2 <code>&lt;meter&gt;</code></h3><p><code>&lt;meter&gt;</code> 标签表示已知范围内的度量值或分数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meter</span> <span class="attr">value</span>=<span class="string">&quot;0.7&quot;</span>&gt;</span>70%<span class="tag">&lt;/<span class="name">meter</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-3-lt-details-gt-和-lt-summary-gt"><a href="#4-3-lt-details-gt-和-lt-summary-gt" class="headerlink" title="4.3 &lt;details&gt; 和 &lt;summary&gt;"></a>4.3 <code>&lt;details&gt;</code> 和 <code>&lt;summary&gt;</code></h3><p><code>&lt;details&gt;</code> 标签用于创建可展开&#x2F;折叠的内容，<code>&lt;summary&gt;</code> 标签用于提供折叠内容的标题。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">details</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">summary</span>&gt;</span>更多信息<span class="tag">&lt;/<span class="name">summary</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是详细信息，可以展开/折叠。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">details</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-4-lt-mark-gt"><a href="#4-4-lt-mark-gt" class="headerlink" title="4.4 &lt;mark&gt;"></a>4.4 <code>&lt;mark&gt;</code></h3><p><code>&lt;mark&gt;</code> 标签表示有意义的文本标记，通常用于突出显示搜索结果。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这是一个<span class="tag">&lt;<span class="name">mark</span>&gt;</span>重要的<span class="tag">&lt;/<span class="name">mark</span>&gt;</span>词。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-5-lt-time-gt"><a href="#4-5-lt-time-gt" class="headerlink" title="4.5 &lt;time&gt;"></a>4.5 <code>&lt;time&gt;</code></h3><p><code>&lt;time&gt;</code> 标签表示日期和时间。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">time</span> <span class="attr">datetime</span>=<span class="string">&quot;2024-07-12&quot;</span>&gt;</span>2024年7月12日<span class="tag">&lt;/<span class="name">time</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-6-lt-ruby-gt-、-lt-rt-gt-、-lt-rp-gt"><a href="#4-6-lt-ruby-gt-、-lt-rt-gt-、-lt-rp-gt" class="headerlink" title="4.6 &lt;ruby&gt;、&lt;rt&gt;、&lt;rp&gt;"></a>4.6 <code>&lt;ruby&gt;</code>、<code>&lt;rt&gt;</code>、<code>&lt;rp&gt;</code></h3><p>这些标签用于表示东亚排版中的注音标记：</p>
<ul>
<li><code>&lt;ruby&gt;</code>：定义需要注音的文字。</li>
<li><code>&lt;rt&gt;</code>：定义注音文字。</li>
<li><code>&lt;rp&gt;</code>：定义在不支持 ruby 注音的浏览器中显示的替代文本。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ruby</span>&gt;</span></span><br><span class="line">  汉 <span class="tag">&lt;<span class="name">rt</span>&gt;</span>hàn<span class="tag">&lt;/<span class="name">rt</span>&gt;</span> 字 <span class="tag">&lt;<span class="name">rt</span>&gt;</span>zì<span class="tag">&lt;/<span class="name">rt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">rp</span>&gt;</span>(<span class="tag">&lt;/<span class="name">rp</span>&gt;</span> <span class="tag">&lt;<span class="name">rt</span>&gt;</span>hàn<span class="tag">&lt;/<span class="name">rt</span>&gt;</span> <span class="tag">&lt;<span class="name">rp</span>&gt;</span>)<span class="tag">&lt;/<span class="name">rp</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">rp</span>&gt;</span>(<span class="tag">&lt;/<span class="name">rp</span>&gt;</span> <span class="tag">&lt;<span class="name">rt</span>&gt;</span>zì<span class="tag">&lt;/<span class="name">rt</span>&gt;</span> <span class="tag">&lt;<span class="name">rp</span>&gt;</span>)<span class="tag">&lt;/<span class="name">rp</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ruby</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>HTML5 的新标签极大地增强了网页的结构化、语义化和多媒体处理能力，使得开发人员可以更直观、更语义化地构建网页结构，处理多媒体内容，并提升表单的功能和用户体验。这些新标签使得 HTML5 更加现代化、功能更强大，并为未来的 Web 发展奠定了坚实的基础。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2024/07/12/html5-new-tags/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;07&#x2F;12&#x2F;html5-new-tags&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;07&#x2F;12&#x2F;html5-new-tags&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/" rel="tag">html5</a></li></ul> 

        
  <nav class="nav">
    <a href="/2024/07/12/vue-cli-eject/"><i class="iconfont iconleft"></i>前端开发 eject 术语及相关技术探究</a>
    <a href="/2024/07/11/vue-component-diffs/">Vue 函数组件 和 抽象组件的区别<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML5-%E6%96%B0%E6%A0%87%E7%AD%BE%E6%A6%82%E8%BF%B0"><span class="toc-text">HTML5 新标签概述</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%AE%E5%BD%95"><span class="toc-text">目录</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E7%BB%93%E6%9E%84%E6%80%A7%E6%A0%87%E7%AD%BE"><span class="toc-text">1. 结构性标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-lt-header-gt"><span class="toc-text">1.1 &lt;header&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-lt-nav-gt"><span class="toc-text">1.2 &lt;nav&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-lt-section-gt"><span class="toc-text">1.3 &lt;section&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-lt-article-gt"><span class="toc-text">1.4 &lt;article&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-lt-aside-gt"><span class="toc-text">1.5 &lt;aside&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-6-lt-footer-gt"><span class="toc-text">1.6 &lt;footer&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-7-lt-main-gt"><span class="toc-text">1.7 &lt;main&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-8-lt-figure-gt-%E5%92%8C-lt-figcaption-gt"><span class="toc-text">1.8 &lt;figure&gt; 和 &lt;figcaption&gt;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%A4%9A%E5%AA%92%E4%BD%93%E6%A0%87%E7%AD%BE"><span class="toc-text">2. 多媒体标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-lt-audio-gt"><span class="toc-text">2.1 &lt;audio&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-lt-video-gt"><span class="toc-text">2.2 &lt;video&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-lt-source-gt"><span class="toc-text">2.3 &lt;source&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-lt-track-gt"><span class="toc-text">2.4 &lt;track&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-lt-embed-gt"><span class="toc-text">2.5 &lt;embed&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-lt-canvas-gt"><span class="toc-text">2.6 &lt;canvas&gt;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E8%A1%A8%E5%8D%95%E5%A2%9E%E5%BC%BA%E6%A0%87%E7%AD%BE"><span class="toc-text">3. 表单增强标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-lt-datalist-gt"><span class="toc-text">3.1 &lt;datalist&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-lt-keygen-gt"><span class="toc-text">3.2 &lt;keygen&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-lt-output-gt"><span class="toc-text">3.3 &lt;output&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-%E6%96%B0%E7%9A%84%E8%BE%93%E5%85%A5%E7%B1%BB%E5%9E%8B"><span class="toc-text">3.4 新的输入类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%85%B6%E4%BB%96%E5%8A%9F%E8%83%BD%E6%80%A7%E6%A0%87%E7%AD%BE"><span class="toc-text">4. 其他功能性标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1-lt-progress-gt"><span class="toc-text">4.1 &lt;progress&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-lt-meter-gt"><span class="toc-text">4.2 &lt;meter&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-lt-details-gt-%E5%92%8C-lt-summary-gt"><span class="toc-text">4.3 &lt;details&gt; 和 &lt;summary&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-lt-mark-gt"><span class="toc-text">4.4 &lt;mark&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-5-lt-time-gt"><span class="toc-text">4.5 &lt;time&gt;</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-6-lt-ruby-gt-%E3%80%81-lt-rt-gt-%E3%80%81-lt-rp-gt"><span class="toc-text">4.6 &lt;ruby&gt;、&lt;rt&gt;、&lt;rp&gt;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-text">总结</span></a></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>